<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
  <script type="text/javascript">
    function msetCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
      var expires = "expires=" + d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    function mgetCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) === 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    }

    function clickFnc() {

      // body...
      var userNameIn = document.getElementById("exampleInputEmail");
      var userPasswordIn = document.getElementById("exampleInputPassword");
      msetCookie("userName", userNameIn.value, 300);
      msetCookie("userPassWord", userPasswordIn.value, 300);
    }
  </script>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Majestic Admin</title>
  <!-- plugins:css -->
  <link rel="stylesheet" th:href="@{/vendors/mdi/css/materialdesignicons.min.css}">
  <link rel="stylesheet" th:href="@{/vendors/base/vendor.bundle.base.css}">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <!-- endinject -->
  <link rel="shortcut icon" th:href="@{/images/favicon.png}"/>
</head>

<body>
<div class="container-scroller">
  <div class="container-fluid page-body-wrapper full-page-wrapper">
    <div class="content-wrapper d-flex align-items-stretch auth auth-img-bg">
      <div class="row flex-grow">
        <div class="col-lg-6 d-flex align-items-center justify-content-center">
          <div class="auth-form-transparent text-left p-3">
            <div class="brand-logo">
              <!--                            <img src="/static/images/logo.svg" alt="logo">-->
            </div>
            <h4>Welcome back!</h4>
            <h6 class="font-weight-light">Happy to see you again!</h6>
            <!--/*@thymesVar id="msg" type="xyz"*/-->
            <h6 th:text="${msg}"></h6>
            <form class="pt-3" th:action="@{/login}" method="post">
              <div class="form-group">
                <label for="exampleInputEmail">Username</label>
                <div class="input-group">
                  <div class="input-group-prepend bg-transparent">
                      <span class="input-group-text bg-transparent border-right-0">
                        <i class="mdi mdi-account-outline text-primary"></i>
                      </span>
                  </div>
                  <input type="text" class="form-control form-control-lg border-left-0"
                         id="exampleInputEmail" name="username" placeholder="Username">
                </div>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword">Password</label>

                <div class="input-group">
                  <div class="input-group-prepend bg-transparent">
                      <span class="input-group-text bg-transparent border-right-0">
                        <i class="mdi mdi-lock-outline text-primary"></i>
                      </span>
                  </div>
                  <input type="password" class="form-control form-control-lg border-left-0"
                         id="exampleInputPassword" name="password" placeholder="Password">
                </div>
              </div>
              <div class="my-2 d-flex justify-content-between align-items-center">
                <div class="form-check">
                  <label class="form-check-label text-muted">
                    <input type="checkbox" name="rememberMe" class="form-check-input">
                    Keep me signed in
                  </label>
                </div>
                <!--                                <a href="#" class="auth-link text-black">Forgot password?</a>-->
              </div>
              <div class="my-3">
                <button class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn"
                        type="submit" onclick=clickFnc()>LOGIN
                </button>
              </div>

              <div class="text-center mt-4 font-weight-light">
                <!--                                Don't have an account? <a class="text-primary" href="/register">Create</a>-->
              </div>
            </form>
          </div>
        </div>
        <div class="col-lg-6 login-half-bg d-flex flex-row">
          <p class="text-white font-weight-medium text-center flex-grow align-self-end">Copyright &copy; 2018
            All rights reserved.</p>
        </div>
      </div>
    </div>
    <!-- content-wrapper ends -->
  </div>
  <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script th:src="@{/vendors/base/vendor.bundle.base.js}"></script>
<!-- endinject -->
<!-- inject:js -->
<script th:src="@{/js/off-canvas.js}"></script>
<script th:src="@{/js/hoverable-collapse.js}"></script>
<script th:src="@{/js/template.js}"></script>
<!-- endinject -->
<script type="text/javascript">
  var userName = mgetCookie("userName");
  var userPassWord = mgetCookie("userPassWord");
  if (userName !== "" && userPassWord !== "") {
    document.getElementById("exampleInputEmail").value = userName;
    document.getElementById("exampleInputPassword").value = userPassWord;
  }
</script>
</body>
</html>
